<html>
<head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
  <script src="../morris.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
  <script src="lib/example.js"></script>
  <link rel="stylesheet" href="lib/example.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
  <link rel="stylesheet" href="../morris.css">
</head>
<body onload="javascript:alterText()">
<div id="chart" style="height: 250px;"></div>
<div id="graph"></div>
<a id="hello"></a>
<script>

Morris.Bar({
  element: 'chart',
  data: [
    { date: '04-02-2014', value: 3 },
    { date: '04-03-2014', value: 10 },
    { date: '04-04-2014', value: 5 },
    { date: '04-05-2014', value: 17 },
    { date: '04-06-2014', value: 6 }
  ],
  xkey: 'date',
  ykeys: ['value'],
  labels: ['Orders']
});


var week_data = (function () {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': 'data.php',
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });

        return json;
    })
    ();
	
var event_data = [["2014-11-20 19:21:04","2014-11-20 20:02:03"]];
	
Morris.Line({
  element: 'graph',
  data: week_data,
  xkey: 'period',
  ykeys: ['licensed', 'sorned'],
  labels: ['Licensed', 'SORN'],
  events: event_data
});
</script>
</body>
</html>